<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/all.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/all.js"></script>
    <title>Database Compare</title>
</head>
<body>
<nav id="top" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:void(0)">
                <b style="color: #000000"><span class="glyphicon glyphicon-cog"></span> 个性化设置 </b>
                <small>这些设置仅保存在浏览器存储中</small>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <div class="navbar-form navbar-right">
                <a id="change-database" class="btn btn-default" href="/">
                    <span class="glyphicon glyphicon-pencil"></span> 更换数据源
                </a>
                <a id="change-compare" class="btn btn-default" href="/main.html">
                    <span class="glyphicon glyphicon-refresh"></span> 重新执行对比
                </a>
            </div>
        </div>
    </div>
</nav>
<div class="container-fluid" style="margin-top: 50px; padding-top: 15px">
    <div class="clearfix">
        <h2 class="pull-left">分组设置 <small>同组内的数据类型会被判定为相同</small></h2>
        <button id="group-add" class="btn btn-primary pull-right" style="margin: 17px 0 0 3px">
            <span class="glyphicon glyphicon-plus"></span> 添加新的组
        </button>
        <button id="group-clear" class="btn btn-danger pull-right" style="margin: 17px 3px 0 0">
            <span class="glyphicon glyphicon-remove"></span> 清除所有组
        </button>
    </div>
    <div id="group-container">
        <div id="group_{{group_index}}" class="panel panel-info group">
            <div class="panel-heading clearfix">
                <label class="group-name">{{group_name}}</label>
                <div class="pull-right">
                    <div class="form-inline group-form">
                        <div class="form-group form-group-sm has-success">
                            <select class="form-control group-item-input-driver" data-group-index="{{group_index}}">
                                <option value="mysql">MySQL</option>
                                <option value="dm">达梦</option>
                            </select>
                        </div>
                        <div class="form-group form-group-sm has-success">
                            <select class="form-control group-item-input-type" data-group-index="{{group_index}}">
                            </select>
                        </div>
                        <button class="btn btn-success btn-sm group-item-add" data-group-index="{{group_index}}">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <button class="btn btn-danger btn-sm group-remove" data-group-index="{{group_index}}">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <span id="group_{{group_index}}_item_{{group_item_index}}" class="label label-primary group-item">
                    <span class="group-item-name">{{group_item_name}}</span>
                    <span class="glyphicon glyphicon-remove group-item-remove" data-group-index="{{group_index}}" data-group-item-index="{{group_item_index}}"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="clearfix">
        <h2 class="pull-left">数据精度设置 <small>以下数据类型的精度将被忽略</small></h2>
        <button id="digest-add" class="btn btn-primary pull-right" style="margin: 17px 3px 0 3px">
            <span class="glyphicon glyphicon-plus"></span> 添加数据类型
        </button>
        <button id="digest-clear" class="btn btn-danger pull-right" style="margin: 17px 0 0 5px">
            <span class="glyphicon glyphicon-remove"></span> 清除所有类型
        </button>
        <div class="form-inline digest-form pull-right" style="margin-top: 21px">
            <div class="form-group form-group-sm has-success">
                <select class="form-control digest-input-driver">
                    <option value="mysql">MySQL</option>
                    <option value="dm">达梦</option>
                </select>
            </div>
            <div class="form-group form-group-sm has-success">
                <select class="form-control digest-input-type"></select>
            </div>
        </div>
    </div>
    <div id="digest-container" style="margin-top: 15px; font-size: 1.2em">
        <span id="digest_{{digest_index}}" class="label label-primary digest-item">
            <span class="digest-item-name">{{digest_name}}</span>
            <span class="glyphicon glyphicon-remove digest-item-remove" data-digest-index="{{digest_index}}"></span>
        </span>
    </div>
</div>
<script>
    var groupDatas = [];
    var groupItemTemplate = $("#group-container .panel-body").html(); $("#group-container .panel-body").html("");
    var groupTemplate = $("#group-container").html(); $("#group-container").html("");
    var mysqlDataTypes = [];
    var dmDataTypes = [];

    var digestDatas = [];
    var digestTemplate = $("#digest-container").html(); $("#digest-container").html("");

    $.get("/mysql/data-type", function (data) {mysqlDataTypes = data; $(".group-item-input-driver, .digest-input-driver").change();});
    $.get("/dm/data-type", function (data) {dmDataTypes = data; $(".group-item-input-driver, .digest-input-driver").change();});

    function loadGroup() {
        var setting = localStorage.getItem("setting.group");
        if (setting) {
            groupDatas = JSON.parse(setting);
        }
        for (var i = 0; i < groupDatas.length; i++) {
            var groupIndex = i + 1;
            var groupItems = groupDatas[i];
            $("#group-container").append(groupTemplate
                .replace(new RegExp("{{group_index}}", "gm"), groupIndex)
                .replace(new RegExp("{{group_name}}", "gm"), "# " + groupIndex)
            );
            $("#group_" + groupIndex + " .group-form .group-item-input-driver").change();
            for (var j = 0; j < groupItems.length; j++) {
                var groupItemIndex = j + 1;
                var groupItem = groupItems[j];
                var driverValue = groupItem.split(".")[0];
                var driverName = $(".group-item-input-driver[data-group-index=" + groupIndex + "] option[value=" + driverValue + "]").text();
                var type = groupItem.split(".")[1];
                $("#group_" + groupIndex + " .panel-body").append(groupItemTemplate
                    .replace(new RegExp("{{group_index}}", "gm"), groupIndex)
                    .replace(new RegExp("{{group_item_index}}", "gm"), groupItemIndex)
                    .replace(new RegExp("{{group_item_name}}", "gm"), driverName + "." + type)
                );
            }

        }
    }

    function saveGroup() {
        localStorage.setItem("setting.group", JSON.stringify(groupDatas));
    }

    function loadDigest() {
        var setting = localStorage.getItem("setting.digest");
        if (setting) {
            digestDatas = JSON.parse(setting);
        }
        for (var i = 0; i < digestDatas.length; i++) {
            var digestIndex = i + 1;
            var digestItem = digestDatas[i];
            var driverValue = digestItem.split(".")[0];
            var driverName = $(".digest-input-driver option[value=" + driverValue + "]").text();
            var type = digestItem.split(".")[1];
            $("#digest-container").append(digestTemplate
                .replace(new RegExp("{{digest_index}}", "gm"), digestIndex)
                .replace(new RegExp("{{digest_name}}", "gm"), driverName + "." + type)
            );
        }
    }

    function saveDigest() {
        localStorage.setItem("setting.digest", JSON.stringify(digestDatas));
    }

    $("#group-clear").click(function () {
        $("#group-container").html("");
        groupDatas = [];
        saveGroup();
    });
    
    $("#group-add").click(function () {
        var groupIndex = groupDatas.length + 1;
        $("#group-container").append(groupTemplate
            .replace(new RegExp("{{group_index}}", "gm"), groupIndex)
            .replace(new RegExp("{{group_name}}", "gm"), "# " + groupIndex)
        );
        groupDatas.push([]);
        saveGroup();
        $("#group_" + groupIndex + " .group-form .group-item-input-driver").change();
    });
    
    $("#group-container").on("click", ".group-item-add", function () {
        var groupIndex = $(this).attr("data-group-index");
        var driverName = $(".group-item-input-driver[data-group-index=" + groupIndex + "] option:selected").text();
        var driverValue = $(".group-item-input-driver[data-group-index=" + groupIndex + "]").val();
        var type = $(".group-item-input-type[data-group-index=" + groupIndex + "]").val();
        var groupItems = groupDatas[groupIndex-1];
        var groupItem = driverValue + "." + type;
        if (groupItems.includes(groupItem)) {
            alert("组[# " + groupIndex + "]已经存在类型[" + driverName + "." + type + "]");
        } else {
            $("#group_" + groupIndex + " .panel-body").append(groupItemTemplate
                .replace(new RegExp("{{group_index}}", "gm"), groupIndex)
                .replace(new RegExp("{{group_item_index}}", "gm"), groupItems.length + 1)
                .replace(new RegExp("{{group_item_name}}", "gm"), driverName + "." + type)
            );
            groupItems.push(groupItem);
        }
        saveGroup();
    });

    $("#group-container").on("click", ".group-remove", function () {
        var groupIndex = $(this).attr("data-group-index");
        $("#group_" + groupIndex).remove();
        groupDatas.splice(groupIndex - 1, 1);
        saveGroup();
        window.location.reload();
    });

    $("#group-container").on("click", ".group-item-remove", function () {
        var groupIndex = $(this).attr("data-group-index");
        var groupItemIndex = $(this).attr("data-group-item-index");
        $("#group_" + groupIndex + "_item_" + groupItemIndex).remove();
        groupDatas[groupIndex-1].splice(groupItemIndex - 1, 1);
        saveGroup();
    });

    $("#group-container").on("change", ".group-item-input-driver", function () {
        var driver = $(this).val();
        var groupIndex = $(this).attr("data-group-index");
        var $dataType = $("#group_" + groupIndex + " .group-form .group-item-input-type");
        var dataType = [];
        if (driver === "mysql") {
            dataType = mysqlDataTypes;
        } else if (driver === "dm") {
            dataType = dmDataTypes;
        }

        $dataType.html("");
        for (var i = 0; i < dataType.length; i++) {
            $dataType.append("<option>" + dataType[i] + "</option>");
        }
    });

    $("#digest-container").on("click", ".digest-item-remove", function () {
        var digestIndex = $(this).attr("data-digest-index");
        $("#digest_" + digestIndex).remove();
        digestDatas.splice(digestIndex - 1, 1);
        saveDigest();
    });

    $("#digest-add").click(function () {
        var driverName = $(".digest-input-driver option:selected").text();
        var driverValue = $(".digest-input-driver").val();
        var type = $(".digest-input-type").val();
        var digestItem = driverValue + "." + type;
        if (digestDatas.includes(digestItem)) {
            alert("数据精度设置中已经存在类型[" + driverName + "." + type + "]");
        } else {
            $("#digest-container").append(digestTemplate
                .replace(new RegExp("{{digest_index}}", "gm"), digestDatas.length + 1)
                .replace(new RegExp("{{digest_name}}", "gm"), driverName + "." + type)
            );
            digestDatas.push(digestItem);
            saveDigest();
        }
    });

    $("#digest-clear").click(function () {
        $("#digest-container").html("");
        digestDatas = [];
        saveDigest();
    });

    $(".digest-input-driver").change(function () {
        var driver = $(this).val();
        var $dataType = $(".digest-input-type");
        var dataType = [];
        if (driver === "mysql") {
            dataType = mysqlDataTypes;
        } else if (driver === "dm") {
            dataType = dmDataTypes;
        }
        $dataType.html("");
        for (var i = 0; i < dataType.length; i++) {
            $dataType.append("<option>" + dataType[i] + "</option>");
        }
    });


    loadGroup();
    loadDigest();

</script>
</body>
</html>